<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>0.25em</view>
				<view>按钮圆角，需带单位，或0</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定义按钮尺寸</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>按钮镂空</view>
			</view>
			<view class="tr">
				<view>titleHeight</view>
				<view>String</view>
				<view>2.5em</view>
				<view>标题栏高度，需带单位</view>
			</view>
			<view class="tr">
				<view>rowHeight</view>
				<view>String</view>
				<view>2.5em</view>
				<view>按钮行高度，需单位</view>
			</view>
			<view class="tr">
				<view>rowSpace</view>
				<view>Number</view>
				<view>0.2</view>
				<view>按钮行间距，固定单位em</view>
			</view>
			<view class="tr">
				<view>rangeBgOpacity</view>
				<view>Number</view>
				<view>0.1</view>
				<view>选区背景色透明度，颜色同按钮设置</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>自定义图标替换</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>prevYear：icon-arr-double-left  上一年</view>
					<view>nextYear：icon-arr-double-right  下一年</view>
					<view>delete：icon-delete-small  删除</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>confirm：确定　提交按钮</view>
					<view>yearSelected：已选　工具栏文字</view>
					<view>thisYear：今年　按钮指示</view>
					<view>tipYearEmptyError：请选择一个选项　出错提示</view>
					<view>tipYearMinError：请至少选择{$min}个选项　出错提示</view>
					<view>tipYearMaxError：请选择{$min}至{$max}个选项　出错提示</view>
					<view>tipYearRangeError：请选择选项范围　出错提示</view>
				</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>radio</view>
				<view>选择类型，radio单选、checkbox多选、range选区</view>
			</view>
			<view class="tr">
				<view>page</view>
				<view>Number</view>
				<view>0</view>
				<view>页码，相对于基准点，用于外部变更</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view></view>
				<view></view>
				<view>当前值，作为基准时间，必须是合法的时间值</view>
			</view>
			<view class="tr">
				<view>row</view>
				<view>Number</view>
				<view>5</view>
				<view>可用按钮的行数</view>
			</view>
			<view class="tr">
				<view>column</view>
				<view>Number</view>
				<view>3</view>
				<view>可用按钮的列数</view>
			</view>
			<view class="tr">
				<view>titleClass</view>
				<view>String</view>
				<view>无</view>
				<view>标题栏样式名，请使用全局样式</view>
			</view>
			<view class="tr">
				<view>iconClass</view>
				<view>String</view>
				<view>无</view>
				<view>前后翻页按钮的样式名，请使用全局样式</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>Number, String</view>
				<view>无</view>
				<view>可选范围开始点，年数值或有效时间值</view>
			</view>
			<view class="tr">
				<view>end</view>
				<view>Number, String</view>
				<view>无</view>
				<view>可选范围结束点，年数值或有效时间值</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>1</view>
				<view>最小选择数，多选使用</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>0</view>
				<view>最大选择数，多选使用</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>useToolbar</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用工具栏，多选时显示已选列表</view>
			</view>
			<view class="tr">
				<view>useSubmit</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用提交按钮</view>
			</view>
			<view class="tr">
				<view>submitText</view>
				<view>String</view>
				<view>确定</view>
				<view>提交按钮文字</view>
			</view>
			<view class="tr">
				<view>submitWidth</view>
				<view>String, Number</view>
				<view>0</view>
				<view>提交按钮宽度</view>
			</view>
			<view class="tr">
				<view>submitRadius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>提交按钮圆角</view>
			</view>
			<view class="tr">
				<view>submitSize</view>
				<view>String</view>
				<view>md</view>
				<view>提交按钮预定尺寸</view>
			</view>
			<view class="tr">
				<view>submitPlain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>提交按钮镂空</view>
			</view>
			<view class="tr">
				<view>submitHeight</view>
				<view>Number, String</view>
				<view>无</view>
				<view>提交按钮高度</view>
			</view>
			<view class="tr">
				<view>@turnPage</view>
				<view>事件</view>
				<view></view>
				<view>翻页，提交当前页码</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>选中变更，根据mode类型提交选中值的年数值、选择列表数组、选区数组</view>
			</view>
			<view class="tr">
				<view>@headClick</view>
				<view>事件</view>
				<view></view>
				<view>标题栏点击，无提交参数</view>
			</view>
			<view class="tr">
				<view>@ready</view>
				<view>事件</view>
				<view></view>
				<view>外部赋值变更完成，根据mode类型提交选中值的年数值、选择列表数组、选区数组</view>
			</view>
			<view class="tr">
				<view>@submit</view>
				<view>事件</view>
				<view></view>
				<view>点击提交按钮，根据mode类型提交选中值的年数值、选择列表数组、选区数组</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-year @change="选中处理">&lt;/vi-year>`}}
			</view>
			<view class="py-sm">
				<vi-year></vi-year>
			</view>
			<view class="py-sm">
				<view class="py-sm">
					多选：
				</view>
				<vi-year mode="checkbox"></vi-year>
			</view>
			<view class="py-sm">
				<view class="py-sm">
					选区：
				</view>
				<vi-year mode="range"></vi-year>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
